<template>
  <div class="container">
    <div id="mars-content"></div>
    <span class="test">ceshi</span>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import { map_option } from "../assets/options"
import * as mars3d from "mars3d"
import base from "../assets/json2/allRange.json"
import river from "../assets/json2/river.json"
import water from "../assets/json2/water.json"
import sk from "../assets/json2/sk.json"
import zyhx_river from "../assets/json2/djdh-zyh.json"
import dqhx_river from "../assets/json2/djdh-dqh.json"
import ydhx_river from "../assets/json2/djdh-ydh.json"
import bshx_river from "../assets/json2/djdh-bsh.json"
import zwhx_river from "../assets/json2/djdh-zwh.json"
import label_data from "../assets/json2/river-label.json"

let map_view: any = null;
let layer: any = null
let terrainUplift: any = null

onMounted(() => {
  init_map();
});

function init_map() {
  map_view = new mars3d.Map("mars-content", map_option);
  map_view.scene.globe.maximumScreenSpaceError = 4 / 3
  // terrainUplift = new mars3d.thing.TerrainUplift({
  //   upHeight: 5000, // 抬升的高度
  //   image: "img/poly-land.png",
  //   // image: "./img/textures/mining.jpg",
  //   imageBottom: "img/poly-land.png",
  //   diffHeight: 0,
  //   splitNum: 0 // 井边界插值数
  // })
  // map_view.addThing(terrainUplift)
  water.features.forEach((el, ind) => {
    add_diff_height_geom(el.geometry.coordinates[0][0], 6000 + (ind + 1) * 2000, el.properties.name)
    add_diff_river(el.properties.code, 6000 + (ind + 1) * 2000)
  })
  //add_geom()
  //add_river()
  //add_line()
  //add_water()
  //add_reservoir()
}
function add_geom() {
  const layer = new mars3d.layer.GraphicLayer({
    flyTo: true
  })
  map_view.addLayer(layer)
  const obj = {
    closure: true,
    diffHeight: 5000,
    width: 10,
  }
  let arr: string | any[] = []
  base.features.forEach((el, ind) => {
    const _data = el.geometry.coordinates[0][0]
    _data.pop()
    const graphic = new mars3d.graphic.ThickWall({
      positions: _data,
      style: {
        ...obj,
        color: "#4b78a2",
      }
    })
    const graphic2 = new mars3d.graphic.ThickWall({
      positions: _data,
      style: {
        ...obj,
        width: 20,
        materialType: mars3d.MaterialType.LineFlow,
        materialOptions: {
          image: "img/fence.png",
          color: "#4b78a2",
          mixt: true,
          speed: 10, // 速度，建议取值范围1-100
          axisY: true
        }
      }
    })
    layer.addGraphic(graphic)
    layer.addGraphic(graphic2)
    arr = arr.concat(el.geometry.coordinates[0][0])
  })
  // addTerrainUplift(arr)
}
function add_river() {
  const layer = new mars3d.layer.GraphicLayer()
  map_view.addLayer(layer)
  river.features.forEach(el => {
    el.geometry.coordinates[0].forEach(el => el[2] = 10000)
    const graphic = new mars3d.graphic.PolylinePrimitive({
      positions: el.geometry.coordinates[0],
      style: {
        width: 5,
        color: "#3498db",
        visibleDepth: false,
      }
    })
    layer.addGraphic(graphic)
  })
}
function add_water() {
  const color = ["#1abc9c", "#eccc68", "#55efc4", "#00a8ff", "#fc5c65", "#cd84f1", "#40739e"]
  const layer = new mars3d.layer.GraphicLayer()
  map_view.addLayer(layer)
  water.features.forEach((el, ind) => {
    const graphic = new mars3d.graphic.PolygonPrimitive({
      positions: el.geometry.coordinates[0],
      style: {
        height: 10500,
        fill: true,
        color: color[ind],
        outline: true,
        outlineColor: "#ffffff",
        outlineWidth: 5,
        opacity: 0.2
      }
    })
    layer.addGraphic(graphic)
  })
}
function add_reservoir() {
  const layer = new mars3d.layer.GraphicLayer()
  map_view.addLayer(layer)
  sk.features.forEach(el => {
    el.geometry.coordinates[2] = 7500
    const graphic = new mars3d.graphic.BillboardEntity({
      position: el.geometry.coordinates,
      style: {
        image: "img/sk.png",
        scale: 0.15
      }
    })
    layer.addGraphic(graphic)
  })
}
function add_diff_height_geom(data, height = 5000, name) {
  const terrainUplift = new mars3d.thing.TerrainUplift({
    upHeight: height,
    image: "img/poly-land.png",
    imageBottom: "img/poly-land.png",
    diffHeight: height,
    splitNum: 0
  })
  map_view.addThing(terrainUplift)
  terrainUplift.addArea(data)
  const layer = new mars3d.layer.GraphicLayer({
    flyTo: true
  })
  map_view.addLayer(layer)
  const obj = {
    closure: true,
    diffHeight: height,
    width: 10,
  }
  const color = ["#1abc9c", "#eccc68", "#55efc4", "#00a8ff", "#fc5c65", "#cd84f1", "#40739e"]
  const index = Math.floor(Math.random() * color.length)
  const graphic3 = new mars3d.graphic.PolygonPrimitive({
    positions: [data],
    style: {
      height: height + 2000,
      fill: true,
      color: color[index],
      outline: true,
      outlineColor: "#ffffff",
      outlineWidth: 2,
      opacity: 0.2,
      // label: {
      //   text: name,
      //   font_family: 'CustomFont',
      //   color: color[index]
      // }
    }
  })
  const label_center = label_data.features.find(el => el.properties.name === name)?.geometry.coordinates
  label_center[2] = height + 3000
  add_label(layer, label_center, name, "#ffffff")
  data.pop()
  const graphic = new mars3d.graphic.ThickWall({
    positions: data,
    style: {
      ...obj,
      color: "#4b78a2",
    }
  })
  const graphic2 = new mars3d.graphic.ThickWall({
    positions: data,
    style: {
      ...obj,
      width: 20,
      materialType: mars3d.MaterialType.LineFlow,
      materialOptions: {
        image: "img/fence.png",
        color: "#4b78a2",
        mixt: true,
        speed: 10, // 速度，建议取值范围1-100
        axisY: true
      }
    }
  })
  layer.addGraphic(graphic)
  layer.addGraphic(graphic2)
  layer.addGraphic(graphic3)
}
function add_diff_river(code: string, height) {
  const list = {
    "CE0000000002": zyhx_river,
    "CD0000000002": dqhx_river,
    "CG0000000002": ydhx_river,
    "CB0000000002": bshx_river,
    "CF0000000002": zwhx_river
  }
  const data = list[code]
  const layer = new mars3d.layer.GraphicLayer()
  map_view.addLayer(layer)
  data.features.forEach(el => {
    el.geometry.coordinates[0].forEach(el => el[2] = height + 1000)
    const graphic = new mars3d.graphic.PolylinePrimitive({
      positions: el.geometry.coordinates[0],
      style: {
        width: 3,
        color: "#3498db",
        visibleDepth: false,
      }
    })
    layer.addGraphic(graphic)
  })
}
function addTerrainUplift(terrainUplift: any, data, height = 5000) {
  terrainUplift.addArea(data, { diffHeight: height, exact: true })
}
function add_label(layer, position, text, color) {
  const graphic = new mars3d.graphic.LabelPrimitive({
    position,
    style: {
      text,
      font_size: 30,
      font_family: 'CustomFont',
      color
    }
  })
  layer.addGraphic(graphic)
}
</script>

<style lang="scss" scoped>
#mars-content {
  position: absolute;
  inset: 0;
}
.test {
  font-family: "CustomFont";
}
</style>